<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉字笔画笔顺学习</title>
    <script src="hanzi-writer.js"></script>
    <style>
        *{padding: 0;margin: 0;}
        html,body,#app{height: 100%;width: 100%;overflow: hidden;}
        #app{display: flex;}
        .left{text-align: center;height: 100%;width: 100px;background-color: #1E9FFF;}
        .right{text-align: center;height: 100%;flex: 1;}
        .main{top: 50%;transform: translateY(-50%);position: relative;}
        .right .hz{border: solid 1px #dddddd;}
        .right .data{text-align: center;margin-top: 60px;}
        input{width: 80px;height: 80px;line-height: 80px;text-align: center;border: none;border-radius: 2px;font-size: 36px;color: #666666;}
        input:focus{outline: none;}
        button:focus{outline: none;border: solid 3px #ffffff !important;}
        .title{font-size: 14px;color: #f2f2f2;margin: 10px 0;}
        #sub{width: 80px;height: 40px;border: none;background-color: #FFB800;color: #ffffff;border-radius: 2px;font-size: 18px;margin-top: 10px;}
        #clear{width: 80px;height: 40px;border: none;background-color: #616161;color: #ffffff;border-radius: 2px;font-size: 18px;margin-top: 10px;}
    </style>
</head>
<body>
    <div id="app">
        <div class="left">
            <div class="title">请输入汉字</div>
            <div class="inputbox">
                <input type="text" id="input" maxlength="1">
            </div>
            <button id="sub" onclick="doFun()">确认</button>
            <button id="clear" onclick="clearFun()">清除</button>
        </div>
        <div class="right">
            <div class="main" id="main" style="opacity: 0;">
                <div id="inner">
                    <svg class="hz" xmlns="http://www.w3.org/2000/svg" width="400" height="400" id="grid-background-target">
                        <line x1="0" y1="0" x2="400" y2="400" stroke="#DDD" />
                        <line x1="400" y1="0" x2="0" y2="400" stroke="#DDD" />
                        <line x1="200" y1="0" x2="200" y2="400" stroke="#DDD" />
                        <line x1="0" y1="200" x2="400" y2="200" stroke="#DDD" />
                    </svg>
                </div>
                <div class="data" id="target"></div>
            </div>
        </div>
    </div>
    
    <script>
        function doFun(){
            var _width = 400;
            if(window.screen.height < 700){
                _width = 200;
            }
            var _svg = "<svg class=\"hz\" xmlns=\"http://www.w3.org/2000/svg\" width=\""+_width+"\" height=\""+_width+"\" id=\"grid-background-target\">\n" +
                "                        <line x1=\"0\" y1=\"0\" x2=\""+_width+"\" y2=\""+_width+"\" stroke=\"#DDD\" />\n" +
                "                        <line x1=\""+_width+"\" y1=\"0\" x2=\"0\" y2=\""+_width+"\" stroke=\"#DDD\" />\n" +
                "                        <line x1=\""+_width/2+"\" y1=\"0\" x2=\""+_width/2+"\" y2=\""+_width+"\" stroke=\"#DDD\" />\n" +
                "                        <line x1=\"0\" y1=\""+_width/2+"\" x2=\""+_width+"\" y2=\""+_width/2+"\" stroke=\"#DDD\" />\n" +
                "                    </svg>";
            document.querySelector('#inner').innerHTML = _svg;
            document.querySelector('#target').innerHTML = "";
            var _hz = document.querySelector('#input').value;
            if(_hz==''){
                alert("请输入正确的汉字");
                return false;
            }
            var writer = HanziWriter.create('grid-background-target', _hz, {
                width: _width,
                height: _width,
                padding: 5,
                delayBetweenLoops: 3000,
                onLoadCharDataSuccess:function(res){
                    var target = document.querySelector('#target');
                    for (var i = 0; i < res.strokes.length; i++) {
                        var strokesPortion = res.strokes.slice(0, i + 1);
                        renderFanningStrokes(target, strokesPortion);
                    }
                    document.querySelector("#main").setAttribute("style","opacity:1;");
                }
            });
            writer.loopCharacterAnimation();
        }

        function clearFun(){
            document.querySelector("#main").setAttribute("style","opacity:0;");
            document.querySelector('#input').value = '';
        }

        function renderFanningStrokes(target, strokes) {
            var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            var _width = 100;
            if(window.screen.height < 700){
                _width = 50;
                document.querySelector("#target").setAttribute("style","margin-top:15px;")
            }
            svg.style.width = _width + 'px';
            svg.style.height = _width + 'px';
            svg.style.border = '1px solid #EEE'
            svg.style.marginRight = '3px'
            target.appendChild(svg);
            var group = document.createElementNS('http://www.w3.org/2000/svg', 'g');

            // set the transform property on the g element so the character renders at 75x75
            var transformData = HanziWriter.getScalingTransform(_width, _width);
            group.setAttributeNS(null, 'transform', transformData.transform);
            svg.appendChild(group);

            strokes.forEach(function(strokePath) {
            var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            path.setAttributeNS(null, 'd', strokePath);
            // style the character paths
            path.style.fill = '#555';
                group.appendChild(path);
            });
        }
    </script>
</body>
</html>